<template>
  <div class="config">
    <div class="item" v-for="(item,index) in configList" :key="index">
      <el-select v-model="item.type" placeholder="请选择算力类型" clearable>
        <el-option value="通用算力">通用算力</el-option>
        <el-option value="超算算力">超算算力</el-option>
        <el-option value="智算算力">智算算力</el-option>
      </el-select>
      <el-select v-model="item.provide" placeholder="请选择指令集" value-key="name" clearable>
        <!-- <el-option v-for="item in provideList" :key="item.name" :value="item.name" :label="item.name">{{item.name}}</el-option> -->
        <el-option value="X86">X86</el-option>
        <el-option value="ARM">ARM</el-option>
        <el-option value="RISC-V">RISC-V</el-option>
        <el-option value="MIPS">MIPS</el-option>
      </el-select>
      <el-select v-model="item.model" clearable placeholder="请选择型号">
        <el-option value="CPU">CPU</el-option>
        <el-option value="GPU">GPU</el-option>
        <el-option value="NPU">NPU</el-option>
        <el-option value="HPC">HPC</el-option>
      </el-select>
      <el-select v-model="item.count" placeholder="请选择数量" clearable>
        <el-option value="20">20</el-option>
      </el-select>
      <a href="javascript:;" class="text-primary" @click="addItem"><i class="el-icon-circle-plus-outline"></i></a>
      <a v-if="configList.length>1" href="javascript:;" style="margin-left: 5px;" @click="removeItem(index)"><i
           class="el-icon-remove-outline"></i></a>
    </div>
  </div>
</template>

<script>
  import { provideList } from './config'
  export default {
    data () {
      return {
        provideList,
        configList: [{
          type: '',
          provide: '',
          model: '',
          count: ''
        }]
      }
    },
    watch: {
      configList: {
        deep: true,
        immediate: true,
        handler: function (newval) {
          this.$emit('input', newval)
        }
      }
    },
    methods: {
      addItem () {
        this.configList.push({})
      },
      removeItem (index) {
        this.configList.splice(index, 1)
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep.el-select {
    width: 150px;
    margin-right: 8px;
}
.item + .item {
    margin-top: 20px;
}
</style>
